<script type="text/html" template lay-done="layui.data.sendParams(d.params)"></script>
<style>
    .viewLogistic {
        cursor: pointer;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-tab layui-tab-brief" lay-filter="LAY_order_detail_form">
            <ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
                <li>操作日志</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div id="orderInfoBox"></div>
                </div>
                <div class="layui-tab-item">
                    <table id="orderLogs" lay-filter="orderLogs"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="orderInfo">
    <fieldset class="layui-elem-field ">
        <legend>约车描述</legend>
        <div class="layui-field-box">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body layui-row ">
                        <div class="layui-col-md12">
                            {{d.info||''}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="layui-elem-field ">
        <legend>订单信息</legend>
        <div class="layui-field-box">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body layui-row ">
                        <div class="layui-col-md12">
                            <div class="layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">用户姓名：</label>
                                    <div class="layui-form-mid layui-word-aux">{{d.userName}}
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">约车类型：</label>
                                    <div class="layui-form-mid layui-word-aux">
                                        {{d.type==0?'拼车':'包车'}}{{d.bizType==0?'出行':'速运'}}
                                    </div>
                                </div>
                            </div>
                            {{# if(d.type==0&&d.lineId>0){ }}
                            <div class="layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">出行线路：</label>
                                    <div class="layui-form-mid layui-word-aux">{{d.lineName||''}}
                                    </div>
                                </div>
                            </div>
                            {{# } }}
                            <div class="layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">出行时间：</label>
                                    <div class="layui-form-mid layui-word-aux">{{d.datetime||''}}
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">出发地址：</label>
                                    <div class="layui-form-mid layui-word-aux">{{d.startPlace||''}}
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">目的地址：</label>
                                    <div class="layui-form-mid layui-word-aux">{{d.endPlace||''}}
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">联系电话：</label>
                                    <div class="layui-form-mid layui-word-aux">{{d.phone||''}}
                                    </div>
                                </div>
                            </div>
                            {{# if(d.bizType==1){ }}
                            <div class="layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">收货电话：</label>
                                    <div class="layui-form-mid layui-word-aux">{{d.recvPhone||''}}
                                    </div>
                                </div>
                            </div>
                            {{# } }}
                            <div class="layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">订单备注：</label>
                                    <div class="layui-form-mid layui-word-aux">{{d.bak||''}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>

    {{# if(d.driver){ }}
    <fieldset class="layui-elem-field ">
        <legend>派车信息</legend>
        <div class="layui-field-box">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body layui-row ">
                        <div class="layui-col-md12">
                            <div class="layui-form-item">
                                <label class="layui-form-label">司机姓名：</label>
                                <div class="layui-form-mid layui-word-aux">{{d.driver.name}}
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">司机电话：</label>
                                <div class="layui-form-mid layui-word-aux">
                                    {{d.driver.mobile||''}}
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">车牌号码：</label>
                                <div class="layui-form-mid layui-word-aux">
                                    {{d.driver.carNumber||''}}
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">派车时间：</label>
                                <div class="layui-form-mid layui-word-aux">
                                    {{d.dispatchTime||''}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    {{# } }}
</script>

<!--<div id="openMap" class="layui-btn layui-btn-primary">打开地图</div>-->

<script type="text/html" id="table-system-order-log">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">
        <i class="layui-icon layui-icon-about"></i>详情
    </a>
</script>
<script>
    layui.data.sendParams = function (params) {
        layui.use(['admin', 'form', 'setter', 'table', 'laytpl'], function () {
            var $ = layui.$
                , laytpl = layui.laytpl
                , admin = layui.admin
                , view = layui.view
                , setter = layui.setter
                , table = layui.table;

            var apiUrl = setter.apiUrl;

            $('#openMap').on('click', function () {
                console.log('12132142342352434324');
                admin.popup({
                    title: '地理位置'
                    , id: 'LAY-popup-map'
                    , area: ['100%', '100%']
                    , success: function (layero, index) {
                        view(this.id).render('car/order/map', params);
                    }
                });
            });

            //订单详情
            admin.req({
                url: apiUrl + '/mapi/order/detail/' + params.id
                , method: 'get'
                , done: function (response) {
                    var data = response.data;

                    var orderInfoTpl = orderInfo.innerHTML, orderInfoBox = document.getElementById('orderInfoBox');
                    laytpl(orderInfoTpl).render(data, function (html) {
                        orderInfoBox.innerHTML = html;
                    });

                    loadOrderLogs(params.id);
                }
            });

            //监听工具条
            table.on('tool(orderLogs)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    admin.req({
                        url: apiUrl + '/mapi/order/log/detail/' + data.id
                        , method: 'get'
                        , done: function (response) {
                            if (response.code === 0) {
                                var data = response.data;
                                var html = '<div style="padding: 50px; background-color: #393D49; color: #fff; font-weight: 300; overflow: auto;">';
                                html += '<pre>';
                                html += JSON.stringify(data.content, null, 2);
                                html += '</pre>';
                                html += '</div>';
                                layer.open({
                                    type: 1,
                                    title: false,
                                    closeBtn: true,
                                    area: '500px;',
                                    id: 'lay-order-log',
                                    btnAlign: 'c',
                                    moveType: 1,
                                    content: html
                                });
                            } else {
                                layer.msg(response.msg, {
                                    offset: '15px', icon: 2
                                });
                            }
                        }
                    });
                }
            });

            function loadOrderLogs(orderId) {

                table.render({
                    elem: '#orderLogs'
                    , url: apiUrl + '/mapi/order/log/list'
                    , method: 'post'
                    , page: true
                    , contentType: 'application/json'
                    , headers: {'token': layui.data(setter.tableName).token}
                    , where: {reserveId: orderId}
                    , request: {
                        pageName: 'pageNo'
                        , limitName: 'pageSize'
                    }
                    , response: {
                        statusCode: 0,
                    }
                    , parseData: function (res) {
                        if (res.code === 0) {
                            return {
                                "code": res.code,
                                "msg": res.msg,
                                "count": res.data.total,
                                "data": res.data.list
                            };
                        } else {
                            return {
                                "code": res.code,
                                "msg": res.msg,
                            };
                        }
                    }
                    , cols: [[
                        {
                            field: 'createdAt',
                            minWidth: 170,
                            title: '操作时间',
                            templet: '<div>{{layui.util.toDateString(d.createdAt, "yyyy-MM-dd HH:mm:ss")}}</div>'
                        },
                        {field: 'subject', minWidth: 50, title: '操作'},
                        {title: '操作', minWidth: 150, fixed: 'right', toolbar: '#table-system-order-log'}
                    ]]
                    , text: {
                        none: '未检索到数据'
                    }
                });
            }
        })
    };
</script>